import * as React from "react"
import { observer, inject } from "mobx-react"
import { Text, View, Image, ViewStyle } from "react-native"
import { Screen } from "../../components/screen"
import { NavigationScreenProps } from "react-navigation"
import { px2dp } from "../../utils"
import { icons } from "../../assets"

export interface BetRecordScreenProps extends NavigationScreenProps<{}> {}

const rootStyle: ViewStyle = {
  backgroundColor: "#f6f6f6",
  flex: 1
}

const listStyle: ViewStyle = {
  paddingHorizontal: px2dp(16)
}

const RecordItem = () => {
  const itemStyle: ViewStyle = {
    marginTop: px2dp(10),
    height: px2dp(122),
    backgroundColor: "#fff"
  }

  const headerStyle: ViewStyle = {
    backgroundColor: "#2A2E3F",
    height: px2dp(50),
    alignItems: "flex-start",
    justifyContent: "center",
    paddingHorizontal: px2dp(12)
  }

  const contentStyle: ViewStyle = {
    paddingHorizontal: px2dp(18),
    paddingVertical: px2dp(12)
  }

  return (
    <View style={itemStyle}>
      <View style={headerStyle}>
        <Text style={{ color: "#fff" }}>5GM彩票</Text>
      </View>
      <View style={contentStyle}>
        <View>
          <Text>重庆时时彩</Text>
        </View>
      </View>
    </View>
  )
}

@inject("rootStore")
@observer
export default class BetRecordScreen extends React.Component<BetRecordScreenProps, {}> {
  static navigationOptions = () => {
    return {
      tabBarIcon: ({ focused }) => {
        const img = focused ? icons.tabBarIcon.betRecord.active : icons.tabBarIcon.betRecord.default

        return <Image style={{ width: px2dp(30), height: px2dp(30) }} source={img} />
      }
    }
  }

  render() {
    return (
      <Screen style={rootStyle} preset="scroll">
        <View style={listStyle}>
          <RecordItem />
          <RecordItem />
          <RecordItem />
        </View>
      </Screen>
    )
  }
}
